<template lang="html">
  <div id="etable">
    <el-table :data="this.$store.getters.mylist.tableList" style="width: 100%">
      <el-table-column label="编号" prop="id">
      </el-table-column>
      <el-table-column label="消耗品名称" prop="name">
      </el-table-column>
      <el-table-column label="价格" prop="price">
      </el-table-column>
      <el-table-column label="进货量" prop="number">
      </el-table-column>
      <el-table-column label="类型" prop="con.goodsClassifyName">
      </el-table-column>
      <el-table-column label="供应商" prop="sup.suppliername">
      </el-table-column>
      <el-table-column label="库存" prop="con.stock">
      </el-table-column>
      <el-table-column label="操作" width="170px">
        <template slot-scope="scope">
          <el-button-group>
            <el-button @click="handleUpdata(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
            <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
            <el-button @click="handleEdit(scope.$index, scope.row)" type="warning" size="mini">补货</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改信息" :visible.sync="dialogEditVisible">
      <el-form :model="editform" :rules="rules"  ref="editForm">
        <el-form-item label="消耗品价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="editform.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消耗品数量" :label-width="formLabelWidth" prop="number">
          <el-input v-model="editform.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消耗品供货商" :label-width="formLabelWidth" prop="suppliername">
          <el-input v-model="editform.suppliername" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOk('editForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="补货" :visible.sync="dialogNumVisible">
      <el-form :model="buhuoForm" :rules="rules" ref="buhuofrom">
        <el-form-item label="补货数量" :label-width="formLabelWidth" prop="addNum">
          <el-input v-model="buhuoForm.addNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitBuHuo">取 消</el-button>
        <el-button type="primary" @click="buhuoOk('buhuofrom')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import * as url from '../../../api/ygrapi.js'
export default {
  name: 'Etable',
  components: {

  },
  data() {
    return {
      dialogEditVisible: false,
      dialogNumVisible: false,
      editform: {
        id:0,
        price: '',
        number: '',
        suppliername:'',
        supplierId:'',
        typeId:''
      },
      buhuoForm:{
        addNum: 0,
      },
      formLabelWidth: '120px',
      rules: {
        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/, message: '价格数值不合法', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '数量不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '数量必须为正整值', trigger: 'blur' }
        ],
        addNum: [
          { required: true, message: '数量不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '数量必须为正整值', trigger: 'blur' }
        ],
        suppliername: [
          { required: true, message: '类名不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    ...mapActions(['getTable','expend/getLists','expend/opList']),
    handleDelete(index, row) {
      this.$confirm(`是否删除编号${row.id}的${row.name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this['expend/opList']([url.deleteConsumeData,{id:row.id}]).then(res=>{
             return this.$store.commit('expend/message',{res:res,tt:this})
            }).catch(err=>{
              console.log(err)
            }).then(res=>{
              this['expend/getLists']([url.getConsumeData])
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleUpdata(index, row) { //修改
      this.dialogEditVisible = true;
      this.editform.id=row.id;
      this.editform.price = row.price;
      this.editform.number = row.number;
      this.editform.suppliername=row.sup.suppliername
      this.editform.supplierId=row.supplierId
      this.editform.typeId=row.typeId
    },
    editOk(formName){//确定修改
       this.$refs[formName].validate((valid) => {
          if (valid) {
            this['expend/opList']([url.updateConsumeData,this.editform]).then(res=>{
              return this.$store.commit('expend/message',{res:res,tt:this})
            }).catch(err=>{
              console.log(err)
            }).then(res=>{
              this['expend/getLists']([url.getConsumeData])
              this.dialogEditVisible=false;
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    handleEdit(index, row) {//补货
      this.editform.id=row.id;
      this.editform.typeId=row.typeId
      this.dialogNumVisible = true;
    },
    exitBuHuo(){//取消补货
      this.editform.addNum=0;
      this.dialogNumVisible=false;
    },
    buhuoOk(formName){//确定补货
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this['expend/opList']([url.buhuoConsumeData,{id:this.editform.id,num:this.buhuoForm.addNum,typeId:this.editform.typeId}]).then(res=>{
              return this.$store.commit('expend/message',{res:res,tt:this})
            }).catch(err=>{
              console.log(err)
            }).then(res=>{
              this['expend/getLists']([url.getConsumeData])
              this.dialogNumVisible=false;
            })
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  },
  computed:{
    typeCounts(){
      let sCount = new Set();
     this.$store.state.table.allList.forEach((item)=>{
      if (item.con) {
        sCount.add(item.con.suppliername )
      }
      })
     return [...sCount]
    }
  },
}

</script>
<style lang="less">
</style>

